<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{height:100%;width:100%;}
    #r-result{width:100%;}
    </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QsGb1glNPY4ZXLwB2sI2yDVZ"></script>
  <title>加各区物业总数</title>
</head>
<body>
  <div id="allmap"></div>

</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  var point = new BMap.Point(116.404, 39.915);
  var point1 = new BMap.Point(116.414, 39.915);
  var point2 = new BMap.Point(116.366, 39.923);
  var point3 = new BMap.Point(116.434, 39.910);
  map.centerAndZoom(point, 15);
  
  var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点

  const circleStyle = {strokeColor:"green", strokeWeight:1, strokeOpacity:0.85};  

  var circle1 = new BMap.Circle(point1,250, circleStyle); //创建圆1
  var circle2 = new BMap.Circle(point2,250, circleStyle); //创建圆2
  var circle3 = new BMap.Circle(point3,250, circleStyle); //创建圆3

  const labelStyle = {color:"red", fontSize:"14px", height:"20px", lineHeight : "20px", fontFamily:"微软雅黑"};
  
  var label1 = new BMap.Label("69", {position:point1, offset:new BMap.Size(-10, -10)});  // 创建文本标注对象1
  label1.setStyle(labelStyle);

  var label2 = new BMap.Label("36", {position:point2, offset:new BMap.Size(-10, -10)});  // 创建文本标注对象2
  label2.setStyle(labelStyle);

  var label3 = new BMap.Label("87", {position:point3, offset:new BMap.Size(-10, -10)});  // 创建文本标注对象3
  label3.setStyle(labelStyle);

  //添加覆盖物
  //  map.addOverlay(marker);  //增加点

  map.addOverlay(circle1);     //增加圆1
  map.addOverlay(circle2);     //增加圆2
  map.addOverlay(circle3);     //增加圆3
  map.addOverlay(label1);      //增加标签1
  map.addOverlay(label2);      //增加标签2
  map.addOverlay(label3);      //增加标签3
</script>
